<template>
	<view class="pay">
		<view class="pay-form">
			<view class="form-item">
				订单编号：
				<text>{{ orderId }}</text>
			</view>
			<view class="form-item">
				订单金额：
				<text>{{ totalPrice }}</text>
			</view>
		</view>
		<view class="pay-method">
			<view class="title">选择支付方式</view>
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<radio-group name="radio">
						<view class="radio-item">
							<view class="pay-opt">
								<image src="../../../static/image/icons/alipay.png" mode=""></image>
								<text>支付宝支付</text>
							</view>
							<label><radio value="alipay" name="payType" checked="true" /></label>
						</view>
						<view class="radio-item">
							<view class="pay-opt">
								<image src="../../../static/image/icons/wxpay.png" mode=""></image>
								<text>微信支付</text>
							</view>
							<label><radio value="wxipay" name="payType" /></label>
						</view>
					</radio-group>
				</view>
				<view class="btns"><button form-type="submit">立即支付</button></view>
			</form>
			<view class="clause">
				点击立即支付，即代表您同意
				<text>《条款协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
import { payConfirm } from '../../../utils/order/payConfirm/index.js';
export default {
	data() {
		return {
			orderId: uni.getStorageSync('orderId'),
			totalPrice: uni.getStorageSync('totalPrice')
		};
	},
	methods: {
		async formSubmit (e) {
			console.log(e);
			uni.showToast({
					icon: 'loading',
			    title: '支付中',
			});
			let userId = uni.getStorageSync('userInfo').id;
			let data = await payConfirm({
				userId,
				orderId: this.orderId,
				payType: e.detail.value.radio
			});
			console.log(data);
			uni.navigateTo({
				url: '../paySuccess/paySuccess'
			});
			uni.hideToast();
		}
	},
	onShow() {
		uni.setNavigationBarTitle({
			title: '订单支付'
		});
	}
};
</script>

<style lang="scss">
.pay {
	width: 100%;
	min-height: 100vh;
	max-height: 100%;
	background-color: #f1ece7;
	box-sizing: border-box;
	padding: 0 20rpx;
	.pay-form {
		.form-item {
			padding: 20rpx 0;
			color: #7d7d7d;
			text {
				color: #333;
			}
		}
	}
	.pay-method {
		box-sizing: border-box;
		padding: 20rpx 0;
		.title {
			margin-bottom: 20rpx;
		}
		.radio-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 50rpx;
			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 15rpx;
			}
			.pay-opt {
				display: flex;
				align-items: center;
			}
		}
		.btns {
			width: 70%;
			margin: 90rpx auto 0;
			button {
				border-radius: 90rpx;
				background-color: #354e44;
				color: #fff;
			}
		}
		.clause {
			font-size: 22rpx;
			color: #999999;
			text-align: center;
			text {
				color: #5a9ef7;
			}
		}
	}
}
.uni-radio-input-checked {
	background-color: #354e44 !important;
}
</style>
